<template>
  <div class="home">
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      style="width: 100%">
      <el-table-column
        prop="task"
        label="任务名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="warehouse"
        label="所在仓库"
        width="150">
      </el-table-column>
      <el-table-column
        prop="beginTime"
        label="开始时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="150">
      </el-table-column>
      <el-table-column label="7月" header-align="center" align="center">
        <el-table-column v-for="m in r" :key="m.r1" :label="m.r1" header-align="center" align="center">
          <el-table-column label="0时" width="100px" header-align="center" align="center">
            <template>
              <el-progress :text-inside="true" :stroke-width="26" :show-text="true" :format="formatText" :percentage="70"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="12时" width="100px" header-align="center" align="center">
          </el-table-column>
          <el-table-column label="16时" width="100px" header-align="center" align="center">
          </el-table-column>
        </el-table-column>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>


export default {
  data(){
    return{
      r:[
        {r1:"27日"},
        {r1:"28日"},
        {r1:"29日"},
        {r1:"30日"},
        {r1:"31日"},
      ],
      tableData: [
        {task:'加工花生',warehouse:'塔姆仓库', beginTime: '2016-05-02',endTime: '2016-05-02'},
        {task:'加工玉米',warehouse:'塔姆仓库', beginTime: '2016-05-02',endTime: '2016-05-02'},
        {task:'加工水稻',warehouse:'塔姆仓库', beginTime: '2016-05-02',endTime: '2016-05-02'},
        {task:'加工水稻',warehouse:'塔姆仓库', beginTime: '2016-05-02',endTime: '2016-05-02'},
        {task:'加工水稻',warehouse:'塔姆仓库', beginTime: '2016-05-02',endTime: '2016-05-02'},
      ]
    }
  },methods:{
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 4) {
        return [1, 15];
      } else if (columnIndex === 4) {
        return [0, 0];
      }
    },
    formatText(percentage) {
      return `撒胡肌肤GV啊上课更换风机啊刷卡核 当前进度：${percentage}%`;
    }
  }
}
</script>

<style>
.home {
  height: 400px;
}
</style>
